import { Component, ReactNode } from "react";
import { BrowserRouter as Router, Route, Link, NavLink, RouteComponentProps, Switch,withRouter } from 'react-router-dom'
import Discover from "./Discover";
import Friend from "./Friend";
import Page404 from "./Page404";
import Detail from "./Detail";
import List from "./List";
import './Base.css'
import CustomLink from './CustomLink'
// NavLink对比Link多了一些内容
// activeClassName 被激活时需要添加的类名
// activeStyle 被激活时添加的样式

// type Iprops={} & RouteComponentProps;
type Iprops={
    [k in keyof RouteComponentProps]?:RouteComponentProps[k]
}
//@ts-ignore
@withRouter
class Base extends Component<Iprops,any> {
    handleClick = () => {
        console.log(this.props);
        let {history}=this.props
        // 跳转到list
        // history.push('/list')
        // 传递参数
        // history.push('/discover?name=123')
        // 传递其他参数
        type p=(a:{pathname:string,[k:string]:any})=>void
        let push:p=history!.push
        push({pathname:'/discover',query:{name:'123'}})
    }
    render() {
        return (
            <fieldset>
                <legend>基本路由</legend>
                <ul>
                    <li><CustomLink to='/friend/123'>朋友</CustomLink></li>
                    <li><CustomLink to='/discover?name=123'>发现</CustomLink></li>
                    <li><CustomLink to='/list'>列表</CustomLink></li>
                </ul>

                <button onClick={this.handleClick}>点击显示history</button>
                {/* <Link to='/friend'>朋友</Link>&nbsp;&nbsp; */}
                {/* <NavLink to='/friend'>朋友</NavLink>&nbsp;|&nbsp; */}

                {/* <Link to='/discover'>发现</Link>&nbsp;&nbsp;&nbsp;|&nbsp; */}
                {/* <NavLink to='/cover'>发现</NavLink>&nbsp;|&nbsp; */}
                {/* <NavLink to='/list'>列表</NavLink>&nbsp;|&nbsp; */}

                {/* 路由配置 */}
                {/* 路由默认是模糊匹配 */}
                {/* vue中拿动态路由参数：this.$route.params*/}
                {/* Switch的作用就是 路由一次只能匹配一个 */}
                <Switch>
                    <Route path='/friend/:id' component={Friend}></Route>
                    <Route path='/discover' component={Discover}></Route>
                    {/* 严格匹配exact */}
                    <Route path='/list' component={List}></Route>
                    <Route path="/detail/:id" component={Detail} />

                    {/* children属性不管路径是否匹配成功，组件都会加载 */}
                    {/* <Route path='/customlink' children={(props:any)=><CustomLink {...props} age={18}/>} /> */}

                    {/* page404一定要放到最后 */}
                    <Route component={Page404}></Route>
                </Switch>
            </fieldset>
        )
    }
}

export default Base